<template>
    <div class="containers">
        <div class="divimg">
            <img :src="img1" alt="">
        </div>
        <div id="login_registered">
            <div class="div1">
                <i class="iconfont">&#xe768;</i>
                <input type="text" placeholder="请输入手机号" v-model="username" v-focus>
            </div>
            <div class="div2">
                <i class="iconfont">&#xe676;</i>
                <input type="text" name="" placeholder="验证码" v-model="ma">
                <div class="hidden" @click="clickHandler">获取验证码</div>
            </div>
            <div class="div3">
                <i class="iconfont">&#xe720;</i>
                <input type="password" name="" placeholder="请输入密码" v-model="password">
            </div>
            <div class="div4">
                <i class="iconfont">&#xe720;</i>
                <input type="password" name="" placeholder="请确认密码" v-model="tpassword">
            </div>
            <div class="sub_btn" v-on:click="register">立即注册</div>
            <span @click="ToRegister" class="fanhui">已有账号？马上登录</span>
        </div>
    </div>
</template>
<script>
import qs from "qs"
export default {
    name:"Register",
    data(){
        return{
            img1:require('@/assets/img/11.png'),
            regData: {      
            },
            username: '',
            password: '',
            tpassword:'',
            ma:''
        }
    },
    mounted(){
       /*页面挂载获取localStorage，如果存在username的localStorage，则跳转到主页，不需登录*/
        if(localStorage.getItem('username')){
            this.$router.push('/home/movement')
        }
    },
    methods: {
        ToRegister(){
            this.$router.push('/login')
        },
        register(){
            if(this.username == "" || this.password == ""){
                    alert("请输入用户名或密码")
            }else{
                var reg_name =  this.username;
                var reg_psw = this.password;
                if(reg_psw !== this.tpassword){
                    alert("两次输入密码不正确！");
                    this.username = "";
                    this.password = "";
                    this.tpassword = "";
                }else{
                    this.$axios.post(this.Zhuce_Host,qs.stringify({
                        username: this.username,
                        password: this.password
                    }))
                    .then(res=>{
                        var content=res.data;
                        if (content.msg !="注册失败") {
                            alert("注册成攻！");
                            this.username = ''
                            this.password = ''
                            /*注册成功之后再跳回登录页*/
                            setTimeout(function(){
                               this.$router.push('/login')
                            }.bind(this),1000)
                        }else{
                            alert("注册失败！");
                        }
                    })
                }
            }
        },
        clickHandler(){
            function getRandomNumber(min,max){
                return Math.floor(Math.random()*(max-min)+min)
            }
            function getRandomStr(m){
                var tempStr='1234567890qwertyuioplkjhgfdsazxcvbnmZXCVBNMLKJHGFDSAQWERTYUIOPZ';
                var temp=''
                for(var i=0;i<m;i++){
                    var randomNumber=getRandomNumber(0,tempStr.length);
                    temp+=tempStr[randomNumber];
                }
                return temp;
            }
            var str=getRandomStr(4);
            console.log(str)
            this.ma=str;
        }
    }
}
</script>
<style lang="less" scoped>
.containers{
    background-color: #171818;
    overflow: hidden;
    .divimg{
        margin-top: 80px;
        margin-left: 110px;
    }
    .div1{
        width: 260px;
        height: 40px;
        border-bottom: 1px solid #fff;
        margin-left: 60px;
        margin-top: 50px;
        i{
            display: inline-block;
            font-size: 29px;
            color:#Fddf05;
            position: relative;
            top:4px;
        }
        input{
            width: 220px;
            height: 100%;
            outline: none;
            color:#fff;
        }
    }
    .div2{
        width: 260px;
        height: 40px;
        border-bottom: 1px solid #fff;
        margin-left: 60px;
        margin-top: 10px;
        position: relative;
        i{
            display: inline-block;
            font-size: 29px;
            color:#Fddf05;
            position: relative;
            top:4px;
        }
        input{
            width: 220px;
            height: 100%;
            outline: none;
            color:#fff;
        }
        .hidden{
            width: 90px;
            height: 26px;
            background-color: #Fddf05;
            color:#171818;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-align: center;
            line-height: 26px;
            border-radius: 13px;
            position: absolute;
            right: 0;
            bottom:5px;
        }
    }
    .div3{
        width: 260px;
        height: 40px;
        border-bottom: 1px solid #fff;
        margin-left: 60px;
        margin-top: 10px;
        i{
            display: inline-block;
            font-size: 29px;
            color:#Fddf05;
            position: relative;
            top:4px;
        }
        input{
            width: 220px;
            height: 100%;
            outline: none;
            color:#fff;
        }
    }
    .div4{
        width: 260px;
        height: 40px;
        border-bottom: 1px solid #fff;
        margin-left: 60px;
        margin-top: 10px;
        i{
            display: inline-block;
            font-size: 29px;
            color:#Fddf05;
            position: relative;
            top:4px;
        }
        input{
            width: 220px;
            height: 100%;
            outline: none;
            color:#fff;
        }
    }
    .sub_btn{
        width: 270px;
        height: 50px;
        background-color: #Fddf05;
        color:#171818;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 4px;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        margin-left: 50px;
        margin-top: 30px;   
    }
    .fanhui{
        display: inline-block;
        margin-left: 100px;
        margin-top: 20px;
        margin-bottom:60px;
    }
}
</style>